<template>
	<view class="card-wrap">
		<!--公共tabs-->
		<u-sticky ref="uSticky" :h5NavHeight="0" @fixed="stickyTabs" @unfixed="unStickyTabs"
			:bgColor="isSticky ? '#fff' : '#f6f6f6'" :enable="enable" :isPxNum="stickyTop">
			<view class="tabs-wrap u-p-y-20"
				:style="isSticky ? 'border-bottom:1px solid #eee;background-color:#fff' : ''">
				<scroll-view scroll-x class="tabs-content" enable-flex scroll-with-animation :scroll-left="scrollLeft">
					<view class="u-flex u-row-cetner u-flex-1 u-col-center">
						<view class="tab-item u-flex-col u-col-center u-row-center" v-for="(item, index) in tabsList"
							:key="index" @tap="tabChange(index)">
							<view class="tab-title u-m-y-6" :class="{ 'title-active': tabCur == index }">{{ item.name }}
							</view>
							<view class="tab-des" :class="{ 'des-active': tabCur == index }">{{ item.description }}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-sticky>
		<view class="card-wrap u-p-30">
			<view v-for="(item, index) in newsList" :key="index" @click="$Router.push({ path: '/pages/news/news', query: { id: item.id } })">
				<view class="thumb-top u-relative u-m-b-40" v-if="styleType == 1">
					<view class="title u-line-1 u-m-b-15 u-m-l-20 bold">{{item.title}}</view>
					<view class="u-tips-color u-line-2 u-m-b-20 u-m-l-20  ds-width">{{item.description}}</view>
						<view class="u-text-center u-relative">
						   <image class="cover" 
						      :src="item.image" 
							  v-if="thumb"
						      :lazy-load="true"
							  :style="{
								 borderRadius: thumbCircle ? '100rpx' : '6rpx' 
							  }"
						   ></image>
						</view>
						<view class="mask u-absolute" v-if="item.video !== null">
							<image class="icon-play" src="../../../static/images/icon_play.png"></image>
						</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	/**
	 * 自定义文章分类卡片
	 * @property {Object} detail - 直播信息
	 */
	let systemInfo = uni.getSystemInfoSync();
	// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
	// #endif
	export default {
		components: {},
		data() {
			return {
				tabCur: 0,
				scrollLeft: 0,
				isSticky: false, //是否吸顶
				categoryId: 0,
				newsList: [],
				tabCurrent: 0,
				lastPage: 1,
				currentPage: 1
			};
		},
		props: {
			//卡片类型
			styleType: {
				type: [Number, String],
				default: 1
			},
			// 标题字体大小，单位rpx
			titleSize: {
				type: [Number, String],
				default: '30'
			},
			// 副标题字体大小，单位rpx
			subTitleSize: {
				type: [Number, String],
				default: '26'
			},
			// card卡片的圆角
			borderRadius: {
				type: [Number, String],
				default: '16'
			},
			// 底部自定义样式，对象形式
			footStyle: {
				type: Object,
				default () {
					return {};
				}
			},
			// 标题左边的缩略图
			thumb: {
				type: String,
				default: ''
			},

			// 缩略图宽高，单位rpx
			thumbWidth: {
				type: [String, Number],
				default: '60'
			},
			//缩略图高度
			thumbHeight: {
				type: [String, Number],
				default: '60'
			},
			// 缩略图是否为圆形
			thumbCircle: {
				type: Boolean,
				default: false
			},
			// 是否显示尾部
			showFoot: {
				type: Boolean,
				default: true
			},
			// 卡片外围阴影，字符串形式
			boxShadow: {
				type: String,
				default: 'none'
			},
			tabsList: {
				type: Array,
				default: () => []
			},
			enable: {
				type: Boolean,
				default: false
			}

		},
		created() {
			this.categoryId = this.tabsList[0]?.id;
			this.getNewsList();
		},
		computed: {
			stickyTop() {
				// #ifdef APP-PLUS || H5
				return systemInfo.statusBarHeight + 44;
				// #endif
				// #ifdef MP
				let height = systemInfo.platform == 'ios' ? 44 : 48;
				let top = systemInfo.statusBarHeight + height;
				return top;
				// #endif
			}
		},
		methods: {
			getNewsList() {
				let that = this;
				that.$http('news.lists', {
					category_id: that.categoryId,
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						that.newsList = [...that.newsList, ...res.data.data];
						that.isEmpty = !that.newsList.length;
						that.lastPage = res.data.last_page;
						that.loadStatus = that.currentPage < res.data.last_page ? 'loadmore' : 'nomore';
					}
				});
			},

			// tabs
			tabChange(index) {
				this.tabCur = index;
				this.scrollLeft = (index - 1) * 60;
				this.categoryId = this.tabsList[index].id;
				//this.styleType === 1 && this.$refs.uWaterfall.clear();
				this.newsList = [];
				this.currentPage = 1;
				this.lastPage = 1;
				this.loadStatus = 'loadmore';
				this.getNewsList();
			},
			stickyTabs() {
				this.isSticky = true;
				this.$refs.uSticky.initObserver();
			},
			unStickyTabs() {
				this.isSticky = false;
				this.$refs.uSticky.initObserver();
			}

		}
	};
</script>

<style lang="scss" scoped>
	.card-wrap {
		background-color: #FFFFFF;
	}

	.category-tabs-wrap {
		min-height: 1000rpx;
	}

	.tabs-wrap {
		background: #FFFFFF;
	}

	// 滑动分类
	.tabs-content {
		white-space: nowrap;

		.tab-item {
			min-height: 90rpx;
			display: inline-block;
			margin: 0 10rpx;
			padding: 0 20rpx;

			.tab-title {
				font-size: 28rpx;
				font-weight: 600;
				color: #333333;
			}



			.tab-des {
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
				text-align: center;
			}

			.des-active {
				/*background: linear-gradient(90deg, #e9b461, #eecc89);*/
				background: #2979ff;
				border-radius: 15rpx;
				padding: 2rpx 10rpx;
				color: #ffffff;
			}
		}
	}
	.intro-box {
		width: 380rpx;
	}

	.ds-width {
		width: 320px;
	}
	.cover {
		width: 100%;
		height: 400rpx;
	}
	.mask {
	  width: 100%;
	  height: 400rpx;
	  bottom: 10rpx;
	  left: 0;
	  z-index: 196;
	  text-align: center;
	  
	}
	
	.icon-play{
	  width: 100rpx;
	  height: 100rpx;
	  margin-top: 150rpx;
	}
	
</style>
